<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
    </div>


</body>

</html>

<style>
    .container {
        /* 当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。 */
        display: grid;
        /* 使用 grid-template-columns 属性在网格容器中创建四个列: */
        /* grid-template-columns: auto auto auto; */
        /* grid-template-rows 属性在网格容器中设置行的高度: */
        /* grid-template-rows: 50px  200px; */
        /* fr 单位 */
        /* 轨道可以使用任何长度单位进行定义。 网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。 */
        grid-template-columns: 2fr 1fr 1fr;
        width: 400px;
        height: 250px;
        border: 1px solid rosybrown;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
    }
</style>